<template>
  <div>
    <nav>
      <h2>todolist</h2>
      <div>
        <input
          type="text"
          v-model="keyword"
          @keydown.enter="add"
          placeholder="添加todo"
        />
      </div>
    </nav>
    <div>
      <h3>正在进行</h3>
      <ul class="text">
        <li v-for="(item) of test" :key="item">
          <input type="checkbox" :checked="false" @click="handleFinish(item)" />
          <span>{{ item }}</span>
        </li>
      </ul>
    </div>
    <div>
      <h3>已经完成</h3>
      <ul class="finish">
        <li v-for="(item) of finish" :key="item">
          <input type="checkbox" :checked="true" @click="handleTesting(item)" />
          <span>{{ item }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { setLocalStorage, getLocalStorage } from "../../local";
export default {
  data() {
    return {
      keyword: "",
      test: [],
      finish: [],
      isShow: false,
      isChecked: true,
    };
  },

  methods: {
    add() {
      if (this.keyword.trim() == "") {
        return;
      }
      if (!this.test.includes(this.keyword)) {
        this.test.push(this.keyword);
        setLocalStorage("testing", this.test);
        setLocalStorage("finish", this.finish);
        // console.log(this.test);
        this.keyword = "";
      }
    },
    handleFinish(val) {
      this.isShow = true;
      var index = this.test.indexOf(val);
      var finishItem = this.test.splice(index, 1);
      this.finish.push(...finishItem);

      console.log(this.finish);
      setLocalStorage("testing", this.test);
      setLocalStorage("finish", this.finish);
    },
    handleTesting(val) {
      this.isChecked = false;
      var index = this.finish.indexOf(val);
      var testingItem = this.finish.splice(index, 1);
      this.test.push(...testingItem);
      setLocalStorage("finish", this.finish);
      setLocalStorage("testing", this.test);
    },
  },
  mounted() {
    var testing = getLocalStorage("testing");
    this.test.push(...testing);
    var finish = getLocalStorage("finish");
    this.finish.push(...finish);
  },
};
</script>

<style>
</style>